<template>
  <z-list item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <z-list-item>
        <z-list-item-meta
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        >
          <template #title>
            <a href="https://www.antdv.com/">{{ item.title }}</a>
          </template>
          <template #avatar>
            <z-avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </z-list-item-meta>
      </z-list-item>
    </template>
  </z-list>
</template>
<script>
import { defineComponent } from 'vue'

const data = [
  {
    title: 'Ant Design Title 1'
  },
  {
    title: 'Ant Design Title 2'
  },
  {
    title: 'Ant Design Title 3'
  },
  {
    title: 'Ant Design Title 4'
  }
]
export default defineComponent({
  setup() {
    return {
      data
    }
  }
})
</script>

<style lang="less">
.ant-list-item-meta-avatar {
  line-height: 84px;
}
</style>
